﻿Ext.namespace('iOS.App.Photos');

Ext.define('PhotosPic', {
	extend : 'BaseView',

	statics : {
		PhotosPicsImg: 'photos-pics-img',
		PicsScaleLay : 'pics-scale-lay',
		PicsTransLay : 'pics-trans-lay',
		ToolBarName  : 'photos-bar',
		TopBarName   : 'top-bar',
		BottomBar    : 'photos-bottom-bar',
		LeftBtn      : 'pics-left-btn',
		PlayBtn      : 'pics-play-btn',
		RightBtn     : 'pics-right-btn',
		GrabageBtn   : 'pics-grabage-btn'
	},

	_status: 'show',

	_hideType : null,

	_oriZIndex: null,

	_eventList : [
		['showBottomBar'],
		['hideBottomBar']
	],

	_attachEventListener: function(){
		this.callParent();
		var sttc  = this.self,
			that  = this,
			scaled= false;
		var config   = {
            //direction  : 'vertical',
            bounces    : 'vertical'
        };
		this.getElCacheByCls(sttc.PhotosPicsImg).//on($.support.click, { scope: this }, this.imgClickHandler).
			on('dblclick', function(){
				var scale;
				if(!scaled){
					scale  = 'scale3d(1.5, 1.5, 1.5)';
					scaled = true;
				} else {
					scale  = 'scale3d(1, 1, 1)';
					scaled = false;
				}
				that.getElCacheByCls(sttc.PicsScaleLay)[0].
					style.webkitTransform = scale;
			});
		this.getElCacheByCls(sttc.BottomBar).children('img').on('mouseover', { scope : this }, this.btnHoverHandler);
		/*this.getElCacheByCls(this.self.PicsScaleLay).
			on($.support.touchstart, { scope : this }, this._doStart).
			on($.support.touchmove,  { scope : this }, this._doMove).
			on($.support.touchstop,  { scope : this }, this._doStop);*/
		$.scrollView(this.getElCacheByCls(sttc.PicsScaleLay)[0], config); 
	},

	hideBottomBar: function(type){
		var sttc   = this.self,
			type   = type || 'fade',
			btmBar = this.getElCacheByCls(sttc.BottomBar); 
		if(type == 'fade'){
			btmBar.css('opacity', '0');
		}
		this._oriZIndex = btmBar.css('zIndex');
		btmBar.on('webkitTransitionEnd', function(){
			btmBar.css('zIndex', '0').off('webkitTransitionEnd');
		});
		this._hideType = type;
	},

	showBottomBar: function(){
		var btmBar = this.getElCacheByCls(this.self.BottomBar);
		if(this._hideType == 'fade'){
			btmBar.css({
				'zIndex'  : this._oriZIndex,
				'opacity' : '1'
			});
		}
	},

	btnHoverHandler: function(event){
		var that = event.data.scope;

	},

	imgClickHandler: function(event){
		var that = event.data.scope,
			sttc = that.self;
		if(that._status == 'show'){
			that._status = 'hide';
		} else {
			that._status = 'show';
		}
		iOS.ViewManager.notify(that, that._status + 'BottomBar', ['fade']);
		iOS.ViewManager.notify(sttc.TopBarName, that._status +'TopBar', ['fade']);
		iOS.ViewManager.notify(sttc.ToolBarName, that._status+ 'ToolBar', ['fade']);
	},

	_initInnerDom: function(){
		var sttc 	 = this.self,
			htmlData = 
			'<div class="' + sttc.PicsTransLay + '">' +
				'<div class="' + sttc.PicsScaleLay + '">' +
					'<img draggable="false" class="' + sttc.PhotosPicsImg +'" ' + 
					'src="resource/images/apps/photos/ios-photos-pics0.png" />' +
				'</div>' +
			'</div>' + 
			'<div class="' + sttc.BottomBar + '">' +
				'<img class="' + sttc.LeftBtn + '"' + 
				' src="resource/images/apps/photos/ios-photos-left.png" />' +
				'<img class="' + sttc.PlayBtn + '"' +
				' src="resource/images/apps/photos/ios-photos-play.png" />' +
				'<img class="' + sttc.RightBtn + '"' +
				' src="resource/images/apps/photos/ios-photos-right.png" />' +
				'<img class="' + sttc.GrabageBtn + '"' +
				' src="resource/images/apps/photos/ios-photos-grabage.png" />' +
			'</div>'
		this.getElCache().html(htmlData);
	},

	_hideLegend: function(){
		iOS.ViewManager.notify(this.self.TopBarName, 'hideTopBar', ['fade']);
	}
});

iOS.App.Photos.PhotosPic = PhotosPic;